<template>
    <div class="work-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="120px"
                ref="form"
                :rules="rules">
                <el-form-item label="工作建议名称" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入工作建议名称"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item label="关联主题"></el-form-item>
                <GroupTemplate class="group" v-model="chooseData" />
            </el-form>
            <div class="text-center" >
                <el-button :loading="loading" type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import GroupTemplate from '@/views/Label/Group/GroupTemplate';

export default {
    components: {
        GroupTemplate,
    },
    data() {
        return {
            loading: false,
            form: {
                name: '',
                course_ids: [],
            },
            id: this.$route.params.id,
            rules: {
                name: [
                    { required: true, message: '会议名称不能为空', trigger: 'blur' },
                ],
            },

            chooseData: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;

                let url = 'scene_proposal';
                let method = 'post';
                if (this.id) {
                    url = `${url}/${this.id}`;
                    method = 'put';
                    this.form.id = this.id;
                }

                if (!this.chooseData || !this.chooseData.length) return $ele.$message.warning('请选择主题');

                this.form.course_ids = this.chooseData.map(item => item.id);

                API[method](url, this.form).then(() => {
                    $ele.$message.success(this.id ? '编辑成功' : '新增成功');
                    this.$router.back();
                });
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`scene_proposal/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i] || res[i] === 0) this.form[i] = res[i];
                    }
                    if (this.form.type) this.form.type_list = JSON.parse(this.form.type);

                    if (!res.course_ids || !res.course_ids.length) return;
                    for (const item of res.course_ids) {
                        this.chooseData.push({id: item});
                    }
                });
            }
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.input-width {
    max-width: 400px;
}
</style>
